import React from 'react';
import {MyBreadcrumb} from '@/components/myBreadcrumb'
import { connect, Dispatch, history } from 'umi'
import { IBanner } from './banner';
import { useMount } from 'ahooks';
import { Table, Image, Space, Button, Popconfirm } from 'antd'
import { deleteBannerReq } from '@/service/banner';
type BannerListProps = {

};

const index: React.FC<BannerListProps> = (props: { bannerList: Array<IBanner>, dispatch: Dispatch }) => {
  console.log('000', props)
  const { bannerList, dispatch } = props
  useMount(() => {
    dispatch({
      type: 'banner/getBannerListEffect'
    })
  })
  const columns: any = [
    {
      title: '序号',
      render (text: null, record: IBanner, index: number) {
        return <span>{ index + 1}</span>
      }
    },
    {
      title: '图片',
      dataIndex: 'img',
      render (text: string, record: IBanner) {
        return (
          <Image src={ text } style={{ width: 200 }} />
        )
      }
    },
    {
      title: '链接link',
      dataIndex: 'link',
    },
    {
      title: '提示alt',
      dataIndex: 'alt',
    },
    {
      title: '操作',
      render (text: null, record: IBanner, index: number) {
        return (
          <Space>
            <Button type="ghost">编辑</Button>
            <Popconfirm
              title="确定删除吗?"
              onConfirm={() => {
                deleteBannerReq({ bannerid: record.bannerid }).then(() => {
                  // 数据库已经完成了删除
                  // 深拷贝
                  const arr = JSON.parse(JSON.stringify(bannerList))
                  console.log('2222', arr)
                  // 删除某一条数据
                  arr.splice(index, 1)
                  console.log('3333', arr)
                  // 改变状态管理器，触发的是reducers
                  dispatch({
                    type: 'banner/UPDATE_BANNER_LIST',
                    payload: arr
                  })
                })
              }}
              // onCancel={cancel}
              okText="确定"
              cancelText="取消"
            >
              <Button danger>删除</Button>
            </Popconfirm>
          </Space>
        )
      }
    }
  ]
  return (
    <>
      <MyBreadcrumb />
      <Button type="primary" onClick = { () => {
        history.push('/banner/add')
      }}>添加轮播图</Button>
      <Table
        dataSource = { bannerList }
        columns = { columns }
        rowKey="bannerid"/>
    </>
  )
}
export default connect((state: any) => {
  return {
    bannerList: state.banner.bannerList
  }
})(index);
